<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 无论外联内联, 按照顺序进行设置, 后面设置的的属性, 会把前面设置过的同名属性替换 -->
    <!-- <link rel="stylesheet" href="./style.css"> -->
    <style>
        /* id 选择器 #id */
        #fontYellow {
            color: yellow;
        }

        /* 内联样式, html css 分开, 但是在同一个页面 */

        /* 标签选择器 */
        div {
            color: red;
        }

        /* 类选择器 .className */
        .bgRed {
            background: red;
            color: #fff;
        }



        /* 通配符选择器 * */
        /* 星号代表所有元素 */
        /* * {
            background: blue;
        } */

        /* 属性选择器 */
        [type=password] {
            color: red;
        }

        /* 分组选择器 */
        /* div, input {
            border: 3px solid;
        } */

        /* 父元素 */
        .parent {
            border: 1px solid;
        }
        /* 后代选择器 */
        .parent div { 
            border: 1px solid blue;
        }
        /* 直接子代选择器 */
        .parent>div {
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div class="bgRed" id="fontYellow">
        <!-- 在元素中, 使用id或者class的区别在于
        id是唯一的, class可以重复.
        比如一个页面当中可能有很多个商品div就使用class
        但是如果是惟一的, 比如是页头的大logo 使用id -->

        <!-- 行内, css 直接卸载html 标签属性里面 -->
        <!-- 如果有行内样式, 那么行内样式的优先级最高 -->
        <!-- <div style="background: red;"> -->
        这是一个盒子
    </div>

    <input type="text">
    <input type="password">

    <div class="parent">
        父元素(在外面)
        <div class="child">
            子元素(在里面)
            <div class="grandChild">
                孙元素(在最里面)
            </div>
        </div>
    </div>
</body>

</html>